<template>
    <div class="dn">
      <div class="dn_title">用餐人数</div>
      <div class="dn_content">
        <p class="xz">请选择正确的用餐人数:</p>
        <ul class="ul_list">
          <li v-for="(i,index) in 20" :class="index==0?'current':''" @click="selectUsersNum($event)">{{ i }}人</li>
        </ul>
        <div class="comment_box">
          <div class="comment">
            <i class="icon"></i>
            <input type="text" class="my_comment" placeholder="请输入您的口味、要求、忌口等(可不填)" v-model="note">
          </div>
        </div>


      </div>
      <div class="dn_foot">
        <span class="cancel" v-show="flag==1?false:true" @click="cancel">取消</span>
        <span class="dc" v-show="flag==1?true:false" @click="toDishesList(1)">点餐</span>
        <span class="sure" v-show="flag==1?false:true" @click="toDishesList(2)">确认</span>
      </div>
      <div class="bg"></div>

    </div>
</template>

<script>
    export default {
      data (){
        return {
          flag:'',
          note:''
        }
      },
      created (){
        console.log('用餐人数');
        this.flag = this.$route.query.flag
        console.log(this.$route)

      },
      mounted (){
        console.log(this.$route)
        if(this.$route.query.users_num){
          console.log(this.$route.query.users_num+' : '+this.$route.query.note)
          this.note = this.$route.query.note
          $('.ul_list li').removeClass('current')
          $('.ul_list li').eq(this.$route.query.users_num-1).addClass('current')
        }
      },
      methods:{
        selectUsersNum (e){

          $('.ul_list li').removeClass('current')
          console.log(e)
          e.target.className = 'current'
          console.log($('.current').html().indexOf('人'))
        },
        toDishesList (n){
          let _index = $('.current').html().indexOf('人')
          let users_num = $('.current').html().slice(0,_index)
          let note = this.note
          this.$http.get(this.kdUrl.url_host+'version=1&resource=table&method=set_table_info&token='+localStorage.getItem("kd_token")+'&users_num='+users_num+'&note='+note).then((res) => {
            console.log(res);
            if(n == 1){
              this.$router.push('/dishesList')
            }else if(n == 2){
              this.$router.push('/shoppingCart')
            }

          },(err) => {
            console.log(err)
          })

        },
        cancel (){
          this.$router.push('/shoppingCart')
        },

      }
    }
</script>

<style scoped>
  .dn{
    /*padding: 0 2.5%;*/
  }
  .dn_title{
    padding: 8px 0;
    background: #ce360a;
    border-radius: 5px;
    font-size: 16px;
    text-align: center;
    margin: 40px auto 30px;
    width: 120px;
    color: #fff;
  }
  /*ce360a*/
  .xz{
    text-align: center;
    color: #ce360a;
    margin-bottom: 20px;
    font-size: 16px;
  }
  .ul_list{
    width: 100%;
    overflow: hidden;
    margin-bottom: 30px;
  }
  .ul_list li{
    float: left;
    width: 21.875%;
    height: 35px;
    border:1px solid #666;
    line-height: 35px;
    text-align: center;
    color: #fff;
    border-radius: 4px;
    margin-left: 2.5%;
    margin-bottom: 10px;
  }
  .ul_list li:nth-of-type(4n){
    margin-right: 2.5%;
  }
  .ul_list li.current{
    background: #ce360a;
    border:1px solid #ce360a;
  }
  .comment_box{
    padding: 0 2.5%;
  }
  .comment{
    border-bottom: 1px solid #666;
    padding-bottom: 6px;
    padding-left: 26px;
    position: relative;
  }
  .icon{
    position: absolute;
    left: 0;
    bottom: 6px;
    width: 18px;
    height: 18px;
    background-image: url('../assets/theme_dark.png');
    background-repeat: no-repeat;
    background-size: 400px 480px;
    background-position: -152px -374px;
  }
  .my_comment{
    border:none;
    background: transparent;
    width: 100%;
    color: #fff;
    outline: none;
  }
  .dn_foot{
    position: fixed;
    width: 100%;
    bottom: 20px;
    height: 60px;
  }
  .cancel,.dc,.sure{
    position: absolute;
    width: 60px;
    height: 60px;
    background: #ce360a;
    border:2px solid #fff;
    border-radius: 50%;
    top:0;
    color: #fff;
    text-align: center;
    line-height: 54px;
    font-size: 16px;
  }
  .cancel{
    background: #31302f;
    left: 15%;
  }
  .sure{
    right: 15%;
  }
  .dc{
    left: 50%;
    transform: translateX(-30px);
  }

  .bg {
    background-image: url('../assets/bg.jpg');
    -webkit-background-size: cover;
    background-size: cover;
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
</style>
